<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">健康阈值设置</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-form
        label-width="auto"
        :inline="true"
        :model="_$.query.requestParam"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="搜索条件">
          <el-input v-model="_$.query.requestParam.condition" clearable />
        </el-form-item>
        <el-form-item>
          <el-space wrap>
            <el-button @click="$.onReset">重置</el-button>
            <el-button type="primary" @click="$.onSearch">查询</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <el-space wrap class="w-fill" :size="20">
      <el-card
        style="max-width: 480px"
        v-for="item in _$.query.responseParam.records"
        :key="'health-data-card' + item.id"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-button
              size="small"
              type="info"
              @click="router.push('/portal/threshold/edit?id=' + item.id)"
              >编辑</el-button
            >
          </div>
        </template>
        <el-descriptions title="阈值设置" :column="3">
          <el-descriptions-item label="最大低血压">
            {{ item.maxDiastolicBloodPressure }}
          </el-descriptions-item>
          <el-descriptions-item label="最大空腹血糖">
            {{ item.maxFastingBloodSugar }}
          </el-descriptions-item>
          <el-descriptions-item label="最大心率">
            {{ item.maxHeartRate }}
          </el-descriptions-item>
          <el-descriptions-item label="最大身高">
            {{ item.maxHeight }}
          </el-descriptions-item>
          <el-descriptions-item label="最大脉搏">
            {{ item.maxPulse }}
          </el-descriptions-item>
          <el-descriptions-item label="最大高血压">
            {{ item.maxSystolicBloodPressure }}
          </el-descriptions-item>
          <el-descriptions-item label="最大腰围">
            {{ item.maxWaistCircumference }}
          </el-descriptions-item>
          <el-descriptions-item label="最大体重">
            {{ item.maxWeight }}
          </el-descriptions-item>
          <el-descriptions-item label="最小低血压">
            {{ item.minDiastolicBloodPressure }}
          </el-descriptions-item>
          <el-descriptions-item label="最小空腹血糖">
            {{ item.minFastingBloodSugar }}
          </el-descriptions-item>
          <el-descriptions-item label="最小心率">
            {{ item.minHeartRate }}
          </el-descriptions-item>
          <el-descriptions-item label="最小身高">
            {{ item.minHeight }}
          </el-descriptions-item>
          <el-descriptions-item label="最小脉搏">
            {{ item.minPulse }}
          </el-descriptions-item>
          <el-descriptions-item label="最小高血压">
            {{ item.minSystolicBloodPressure }}
          </el-descriptions-item>
          <el-descriptions-item label="最小腰围">
            {{ item.minWaistCircumference }}
          </el-descriptions-item>
          <el-descriptions-item label="最小体重">
            {{ item.minWeight }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-space>
  </el-space>
</template>

<style scoped></style>
